<template>
    <div class="index-container">
        <v-breadcrumb :breadcrumbData="[{name: '商品管理'}, {name: '商品详情'}]"></v-breadcrumb>

        <div class="g-box">
            <div class="table">
                <table class="width100 vd-table">
                    <tbody>
                    <tr>
                        <td style="width:130px">所属分类</td>
                        <td>
                            <el-select v-model="addobj.category_id" placeholder="请选择商品分类" class="width-400">
                                <el-option v-for="(item,index) in categorys" :key="item.id"
                                           :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>商品名称</td>
                        <td>
                            <el-input placeholder="请填写商品名称" v-model="addobj.name" class="width-400"/>
                        </td>
                    </tr>
                    <tr>
                        <td>基础售价</td>
                        <td>
                            <el-input v-model="addobj.price" class="width-400"/>
                            <span class="ml-5">元</span>
                        </td>
                    </tr>
                    <tr>
                        <td style="width:130px">商品类型</td>
                        <td>
                            <el-select v-model="addobj.type" placeholder="请选择商品类型" class="width-400">
                                <el-option label="不限制" :value="1"></el-option>
                                <el-option label="普通商品，不能用于促销活动" :value="2"></el-option>
                                <el-option label="活动专用商品，不能用于普通销售" :value="3"></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td style="width:130px">状态</td>
                        <td>
                            <el-select v-model="addobj.status" placeholder="请选择是否上架" class="width-400">
                                <el-option label="上架中" :value="1"></el-option>
                                <el-option label="下架中" :value="2"></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>初始销量</td>
                        <td>
                            <el-input placeholder="请填写初始销量" v-model="addobj.fake_sales" class="width-400"/>
                        </td>
                    </tr>
                    <tr>
                        <td>库存</td>
                        <td>
                            <el-input placeholder="请填写库存" v-model="addobj.stock" class="width-400"/>
                        </td>
                    </tr>
                    <tr>
                        <td>固定佣金</td>
                        <td>
                            <el-input placeholder="请填写固定佣金比例" v-model="addobj.commission_percentage"
                                      class="width-400"/>
                            <span class="ml-5">单位：百分比（普通销售的商品佣金，分配给上级用户）</span>
                        </td>
                    </tr>
                    <tr>
                        <td>活动固定佣金</td>
                        <td>
                            <el-input placeholder="请填写活动佣金比例" v-model="addobj.promotion_commission_percentage"
                                      class="width-400"/>
                            <span class="ml-5">单位：百分比（促销活动的商品佣金，分配给上级用户）</span>
                        </td>
                    </tr>
                    <tr>
                        <td>排序</td>
                        <td>
                            <el-input placeholder="请填写排序" v-model="addobj.sort" class="width-400"/>
                            <span class="ml-5">数值越大，排序越靠前</span>
                        </td>
                    </tr>
                    <tr>
                        <td>标题图片</td>
                        <td>
                            <v-upload-image :fromData="addobj.image" @toData="uploadTitleImage"></v-upload-image>
                            <el-alert class="mt-10" title="建议尺寸：300像素 × 300像素" type="success"></el-alert>
                        </td>
                    </tr>

                    <tr>
                        <td>Banner图片</td>
                        <td>
                            <div>
                                <v-upload-images :fromData="addobj.banner_images"
                                                 @toData="uploadBannerImages"></v-upload-images>
                                <el-alert class="mt-10" title="建议尺寸：750像素 × 500像素" type="error"></el-alert>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td>卖点</td>
                        <td>
                            <div>
                                <el-input placeholder="请填写" v-model="sellPoint" class="width-400"/>
                                <el-button v-preventDbClick type="success" @click="addPoint" class="width-100 ml-10">
                                    新增
                                </el-button>
                            </div>
                            <div v-for="(item,index) in addobj.sell_points" :key="index" class="mt-10">
                                <el-input placeholder="请填写" v-model="item.name" class="width-400"/>
                                <el-button v-preventDbClick type="danger" @click="delPoint(index)"
                                           class="width-100 ml-10">删除
                                </el-button>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td>微信分享标题</td>
                        <td>
                            <el-input placeholder="请填写" v-model="addobj.share_title" class="width-400"/>
                        </td>
                    </tr>

                    <tr>
                        <td>微信分享图片</td>
                        <td>
                            <div>
                                <v-upload-image :fromData="addobj.share_image"
                                                @toData="uploadShareImage"></v-upload-image>
                                <el-alert class="mt-10" title="图片长宽比：5比4；建议尺寸：375像素 × 300像素"
                                          type="info"></el-alert>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td>微信海报背景图</td>
                        <td>
                            <div>
                                <v-upload-image :fromData="addobj.share_bg" @toData="uploadShareBg"></v-upload-image>
                                <el-alert class="mt-10" title="建议尺寸：750像素 × 750像素" type="warning"></el-alert>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td>商品详情</td>
                        <td>
                            <v-editor :fromData="addobj.content" @toData="changeContent"></v-editor>
                        </td>
                    </tr>

                    <tr>
                        <td></td>
                        <td>
                            <el-button v-preventDbClick @click="submit" type="primary" class="width-400">确定
                            </el-button>
                        </td>
                    </tr>

                    </tbody>
                </table>

            </div>
        </div>

    </div>
</template>

<script type="text/ecmascript-6">
import request from '../../common/js/request.js';
import {tool} from "../../common/js/tool.js";
import config from '../../common/js/config.js'

export default {
    data() {
        return {
            id: 0,
            categorys: [],
            addobj: {
                category_id: '',
                name: '',
                image: '',
                banner_images: [],
                price: 100,
                type: 1,
                status: 2,
                fake_sales: 100,
                content: '',
                stock: 9999,
                sort: 0,
                commission_percentage: '',
                promotion_commission_percentage: '',
                sell_points: [],
                share_bg: '',
                share_image: '',
                share_title: ''
            },
            sellPoint: ''
        };
    },

    computed: {},

    mounted() {
    },

    created() {
        this.id = this.$route.query.id ? this.$route.query.id : 0;
        request({
            url: '/manage/goodsCategory/all',
            data: {status: 1}
        }).then((res) => {
            this.categorys = res.data;
            if (this.id) {
                this.getData();
            } else {
                this.addobj.category_id = this.categorys.length ? this.categorys[0]['id'] : 0;
            }
        })
    },

    methods: {
        delPoint(index) {
            this.$confirm('确定要删除吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.addobj.sell_points.splice(index, 1);
            });
        },
        addPoint() {
            if (this.sellPoint) {
                this.addobj.sell_points.push({name: this.sellPoint});
                this.sellPoint = '';
            } else {
                tool.message('请输入内容', 'error');
            }
        },
        getData() {
            request({
                url: '/manage/goods/one',
                data: {id: this.id}
            }).then((res) => {
                this.addobj.category_id = res.data.category_id;
                this.addobj.name = res.data.name;
                this.addobj.price = res.data.price;
                this.addobj.type = res.data.type;
                this.addobj.status = res.data.status;
                this.addobj.fake_sales = res.data.fake_sales;
                this.addobj.sort = res.data.sort;
                this.addobj.image = res.data.image;
                this.addobj.commission_percentage = res.data.commission_percentage;
                this.addobj.promotion_commission_percentage = res.data.promotion_commission_percentage;
                this.addobj.banner_images = JSON.parse(res.data.info.banner_images);
                this.addobj.sell_points = JSON.parse(res.data.info.sell_points);
                this.addobj.content = res.data.info.content;
                this.addobj.stock = res.data.stock.stock;
                this.addobj.share_bg = res.data.share_bg;
                this.addobj.share_image = res.data.share_image;
                this.addobj.share_title = res.data.share_title;
            })
        },
        submit() {
            console.log(this.addobj)
            let addobj = Object.assign({}, this.addobj);
            addobj.banner_images = JSON.stringify(addobj.banner_images);
            addobj.sell_points = JSON.stringify(addobj.sell_points);
            if (this.id) {
                addobj.id = this.id;
                request({
                    url: '/manage/goods/edit',
                    data: addobj
                }).then((res) => {
                    tool.message('操作成功', 'success', () => {
                        this.$router.push({path: "/goods/list"});
                    })
                })
            } else {
                request({
                    url: '/manage/goods/add',
                    data: addobj
                }).then((res) => {
                    tool.message('操作成功', 'success', () => {
                        this.$router.push({path: "/goods/list"});
                    })
                })
            }
        },
        uploadTitleImage(a) {
            this.addobj.image = a;
        },
        uploadBannerImages(a) {
            this.addobj.banner_images = a;
        },
        changeContent(a) {
            this.addobj.content = a;
        },
        uploadShareBg(a) {
            this.addobj.share_bg = a;
        },
        uploadShareImage(a) {
            this.addobj.share_image = a;
        }
    },

};
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import url("../../common/css/variable.less");
</style>
